<!--
 * @Date: 2020-07-10 11:49:33
 * @LastEditors: leehave
 * @LastEditTime: 2020-09-09 19:56:31
--> 
<template>
  <div>
    <van-swipe :autoplay="3000" class="banner">
      <van-swipe-item
        v-for="(image, index) in images"
        :class="{'active': current}"
        :key="index"
        @change="bannerChange"
      >
        <img :src="image.url" />
      </van-swipe-item>
    </van-swipe>

    <van-grid direction="horizontal" :column-num="2" class="grid-content">
      <van-grid-item>
        <div class="content">
          <div class="money">
            <div class="name">账户余额</div>
            <div class="num">{{userInfo.points}}</div>
          </div>
          <div class="icon">
            <img :src="qianbao" alt="" srcset="">
          </div>
        </div>
      </van-grid-item>
      <van-grid-item>
        <div class="content">
          <div class="money">
            <div class="name">赠送余额</div>
            <div class="num">{{userInfo.givePoints}}</div>
          </div>
          <div class="icon">
            <img :src="qianbao" alt="" srcset="">
          </div>
        </div>
      </van-grid-item>
    </van-grid>

    <footTab></footTab>
  </div>
</template>

<script>
import footTab from "@/components/footerTab/index";
import staticPath from "@/assets/json/index";
import noticePanel from "@/components/notice-panel/index";
import { authSubscribe, queryByQrCode } from "@/service/user";
import { mapGetters, mapState } from "vuex";
import { userInfo } from "vuex";
import { scanWxQRCode,initWxJSDK } from "@/utils/wx-util";
import { param2Obj,objectConvertToQuery,isIOS } from '@/utils/index';
import wx from 'weixin-js-sdk'
export default {
  data() {
    return {
      notice: staticPath.notice,
      stepFoot: staticPath.step,
      qianbao: staticPath.qianbao,
      current: 0,
      numberDialog: false,
      checked: true,
      deviceNum: "",
      images: [
        {
          id: 0,
          type: "image",
          url: staticPath.banner1,
        },
        {
          id: 1,
          type: "image",
          url: staticPath.banner2,
        },
        {
          id: 2,
          type: "image",
          url: staticPath.banner3,
        },
      ],
    };
  },
  created() {
    
      // this.fetchInitWxutil();
  },
  computed: {
    ...mapGetters(["userInfo", "code"]),
  },
  methods: {
    async fetchInitWxutil(){
      await initWxJSDK(['chooseImage', 'uploadImage', 'previewImage', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareTimeline', 'chooseWXPay', 'scanQRCode']);
    },
    routerTo() {
      this.$router.push({
        path: "/user/disclaimer",
      });
    },
    bannerChange(e) {
      this.current = e;
    },
    handleInputNum(e) {
      this.numberDialog = true;
    },
    handleScan() {
      this.fetchInitWxutil();
      if (!this.checked) {
        this.$toast("请查看并勾选‘同意《充电说明》’");
      } else {
        let that = this;
        wx.ready(function() {
          scanWxQRCode((res) => that.queryDevice(res,'scan'));
        })
      }
    },
    handleNumClose() {
      this.numberDialog = false;
    },
    handleNumCancel() {
      this.numberDialog = false;
    },
    handleNumConfim() {
      this.numberDialog = false;
      if (this.deviceNum == "") {
        this.$toast("请输入设备编号");
        return;
      }
      this.queryDevice(this.deviceNum,'input');
    },
    // 查询设备
    async queryDevice(value,type) {
      let params = {};
      let path = null;
      if(type == 'scan'){
        if(value.indexOf('?') > -1){
          path = param2Obj(value)
          if(path.hasOwnProperty('deviceId') && path.deviceId !== undefined){
            path.qrNum = path.deviceId
            delete path.deviceId
          }
          params = Object.assign({},path)
          // 老二路设备
          if(path.hasOwnProperty('port') && path.port !== undefined){
            params.qrNum = path.qrNum + path.port
          }
          console.log(path,'path queryDevice')
        }else{
          path = {}
          path.qrNum = value;//老设备 非常老 非常坑
          params.qrNum = value
        }
      }else{
        params.qrNum = value;
        path = {}
        path.qrNum = value;
      }
      params.orgId = this.userInfo.orgId;
      let result = await queryByQrCode(params);
      if (result.respCode !== "000000" || null == result.respObject) {
        this.$toast(result.respMsg);
      } else {
        if(params.hasOwnProperty('qrNum') && params.hasOwnProperty('chargeType') && params.chargeType == 'card'){
          this.$router.push({
            path: `/user/balance?qrNum=${params.qrNum}&chargeType=${params.chargeType}`,
          });
        }else{
          this.$router.push({
            path: `/user/balance?qrNum=${path.qrNum}&chargeType=wallet`,
          });
        }
      }
    },
  },
  components: {
    footTab,
    noticePanel,
  },
};
</script>
<style scope lang='less'>
.notice {
  font-size: 12px;
  .notice-icon {
    display: inline-block;
    width: 40px;
  }
}
.banner {
  img {
    width: 100%;
    display: block;
  }
  .van-swipe {
    &-item {
      color: #ffffff;
      font-size: 20px;
      height: 150px;
      text-align: center;

      &:nth-child(even) {
        background-color: #39a9ed;
      }

      &:nth-child(odd) {
        background-color: #66c6f2;
      }
    }

    img {
      display: block;
      box-sizing: border-box;
      width: 100%;
      height: 240px;
      padding: 30px 60px;
      background-color: #fff;
      pointer-events: none;
    }
  }
}
.scan-container {
  padding: 30px 80px 0 80px;
}
.space {
  padding: 15px;
}
.common-dialog {
  .content {
    padding: 20px 40px;
    p {
      font-size: 12px;
      color: #808080;
      margin-bottom: 12px;
    }
    text-align: center;
    .input-wrapper {
      margin-top: 10px;
      .input {
        border: 1px solid #9e99b9;
        border-radius: 25px;
        height: 35px;
        line-height: 30px;
        padding: 3px 10px;
        width: 80%;
        margin: 0 auto;
      }
    }
  }
}
.radio-wrapper {
  font-size: 14px;
  padding: 30px 0;
  .van-checkbox {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
  }
  .xieyi {
    color: #39a9ed;
  }
}
.grid-content{
  .van-grid-item__content{
    display: flex;
    justify-content: center;
    align-items: center;
    .money{
      flex: 1;
    }
    .name{
      font-size: 16px;
      margin-bottom: 10px;
    }
  }
  .content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .icon{
      width: 36px;
      height: 36px;
      margin-left: 12px;
      img{
        width: 100%;
      }
    }
  }
}
</style>